<template>
  <div>
    <div id="course-list">
      <div class="search-box">
        <div class="search-item">
          <div class="search-label">课程名1:</div>
          <div class="search-content">
            <el-input
              v-model="courseName"
              placeholder="请输入内容"
              size="mini"
            ></el-input>
          </div>
        </div>
        <div class="search-item">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="queryCourse"
            >查询</el-button
          >
        </div>
        <div class="search-item">
          <div class="grid-content bg-purple" style="text-align: left">
            <el-button
              type="primary"
              @click="openNewCourseDialog"
              icon="el-icon-plus"
              size="mini"
              >创建课程</el-button
            >
            <el-button
              @click="deleteClassCourse"
              icon="el-icon-delete"
              size="mini"
              >批量操作</el-button
            >
          </div>
        </div>

        <div
          class="search-item"
          style="text-align: left; margin-top: 15px"
          v-show="status.isCheckBoxDisplay"
          id="classListBatchDelete"
        >
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <span
            style="
              font-size: 14px;
              cursor: pointer;
              margin-left: 20px;
              color: red;
            "
            @click="batchDeleteClassCourse"
            >批量删除</span
          >
        </div>
      </div>
    </div>

    <el-main>
      <el-row>
        <el-checkbox-group
          v-model="checkedClassCourseId"
          @change="handleCheckedCitiesChange"
        >
          <el-col :span="6" v-for="course in courselist" :key="course.id">
            <el-card
              :body-style="{ padding: '10px' }"
              style="margin: 10px; position: relative"
            >
              <img
                :src="course.cover_url"
                class="image"
                style="height: 200px; cursor: pointer"
                @click="goCourseDetail(course.id)"
              />
              <div style="padding: 14px 0">
                <div
                  @click="goCourseDetail(course.id)"
                  style="cursor: pointer; display: block; height: 30px"
                >
                  <time class="time" style="font-size: 16px; color: #000">{{
                    course.name
                  }}</time>
                </div>
                <div class="bottom clearfix">
                  <time class="time"
                    >{{ course.start_time }}-{{ course.end_time }}</time
                  >
                  <time
                    class="time"
                    style="float: right"
                    v-text="toPermissionLabel(course)"
                  ></time>
                </div>
                <el-checkbox
                  :label="course.id"
                  v-show="status.isCheckBoxDisplay"
                  style="
                    position: absolute;
                    top: 15px;
                    left: 15px;
                    z-index: 100;
                  "
                  >&nbsp;</el-checkbox
                >
              </div>
            </el-card>
          </el-col>
        </el-checkbox-group>
      </el-row>
    </el-main>

    <el-dialog title="新增课程" :visible.sync="newCourseDialog">
      <el-form size="small" label-width="100px">
        <el-form-item label="课程名称:">
          <el-input
            placeholder="输入课程名称"
            v-model="d_course_name"
            size="mini"
          ></el-input>
        </el-form-item>

        <el-form-item label="封面介绍图:">
          <el-upload
            class="avatar-uploader"
            action="/file/upload"
            name="fileData"
            :on-success="handleUploadSuccess"
            :multiple="false"
            :show-file-list="false"
          >
            <img v-if="d_cover_url" :src="d_cover_url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="详情介绍图:">
          <el-upload
            class="avatar-uploader"
            action="/file/upload"
            name="fileData"
            :on-success="handleDetailUploadSuccess"
            :multiple="false"
            :show-file-list="false"
          >
            <img v-if="d_detail_url" :src="d_detail_url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="年级" prop="grade_id">
          <el-select v-model="d_grade_id" placeholder="请选择">
            <el-option
              v-for="item in grade_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="价格" prop="price">
          <el-radio-group>
            <el-input-number
              v-model="d_price"
              :precision="2"
              :step="0.01"
              :min="0"
              :max="50000"
            ></el-input-number>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="起始时间:">
          <el-date-picker
            v-model="d_start_time"
            format="yyyy-MM-dd"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="终止时间:">
          <el-date-picker
            v-model="d_end_time"
            format="yyyy-MM-dd"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>
        <el-form class="demo-ruleForm">
          <div class="block">
            <el-tag style="margin-right: 8px">选择分类:</el-tag>
            <el-cascader
              size="small"
              v-model="val2"
              :options="toplist"
              @change="handleChangeTop"
              :props="listchange"
            ></el-cascader>
          </div>
        </el-form>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="newCourseDialog = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="addCourse" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "course-list",
  data() {
    return {
      toplist: [],
      courseName: "",
      courselist: [],
      grade_options: [],
      selectedList: [],
      newCourseDialog: false,
      //新增course
      d_start_time: "",
      d_end_time: "",
      d_course_name: "",
      d_cover_url: "",
      d_detail_url: "",
      d_grade_id: "",
      d_price: "",
      listchange: {
        label: "className",
        value: "classId",
      },
      classId: "",
      // 状态
      status: {
        isCheckBoxDisplay: false,
      },
      checkAll: false,
      checkedClassCourseId: [],
      allClassCourseIds: [],
      isIndeterminate: true,
    };
  },
  methods: {
    getFenlei() {
      this.postRequest(
        "/back/class/queryPracticeClassList?pageNo=" +
          this.currentPage +
          "&pageSize=20"
      ).then((res) => {
        //console.log("data", res.data.data);
        this.toplist = res.data.data;
		console.log( this.toplist)
      });
    },
    queryCourse() {
      this.postRequest("/course/queryCourses", {
        name: this.courseName,
        is_famous: 1,
      }).then((resp) => {
        this.courselist = resp.data.data.arrays;
		console.log( this.courselist )
        for (var c in this.courselist) {
          this.allClassCourseIds.push(this.courselist[c].id);
        }
      });
    },
    loadGrades() {
      var _this = this;
      this.tableLoading = true;
      this.postRequest("/grade/list").then((resp) => {
        this.tableLoading = false;
        if (resp && resp.status == 200) {
          var data = resp.data;
          _this.grade_options = data.data.arrays;
        }
      });
    },
    handleChangeTop(e) {
      //console.log("e", e);
      this.classId = e[1];
      //   for (let i = 0; i < this.toplist.length; i++) {
      //     if (this.toplist[i].classId == e[0]) {
      //       for (let j = 0; j < this.toplist[i].children.length; i++) {
      //         if (this.toplist[i].children[j].classId == e[1]) {
      //           this.Name = this.toplist[i].children[j].className;
      //         }
      //       }
      //     }
      //   }
      //   let obj = this.classId;
      //   this.postJson("/back/chaptertype/queryListByClassId", obj).then((res) => {
      //     this.leimu = res.data.data;
      //   });
      // },
    },
    handleUploadSuccess(result, file) {
      this.d_cover_url = result.url;
    },
    handleDetailUploadSuccess(result, file) {
      this.d_detail_url = result.url;
    },
    openNewCourseDialog() {
      this.newCourseDialog = true;
      this.d_cover_url = "";
      this.d_detail_url = "";
      this.d_grade_id = "";
    },
    toPermissionLabel(row) {
      if (row.permission == 0) return "待审核";
      if (row.permission == 1) return "审核通过";
      if (row.permission == -1) return "审核未通过";
    },
    addCourse() {
      if (!this.d_course_name) {
        this.$message({ type: "error", message: "请输入课程名称" });
        return;
      }

      if (!this.d_grade_id) {
        this.$message({ type: "error", message: "请选择年级" });
        return;
      }

      if (!this.d_start_time) {
        this.$message({ type: "error", message: "请选择课程开始时间" });
        return;
      }
      if (!this.d_end_time) {
        this.$message({ type: "error", message: "请输入课程结束时间" });
        return;
      }

      // if (!this.d_price) {
      //   this.$message({ type: "error", message: "请输入课程价格" });
      //   return;
      // }
      if (!this.classId) {
        this.$message({ type: "error", message: "请选择分类" });
        return;
      }
      var params = {
        classId: this.classId,
        name: this.d_course_name,
        grade_id: this.d_grade_id,
        start_time: this.d_start_time,
        end_time: this.d_end_time,
        cover_url: this.d_cover_url,
        detail_url: this.d_detail_url,
        is_open: 0,
        is_famous: 1,
        price: this.d_price,
      };
	  console.log(params)
      this.postRequest("/course/addCourse", params)
        .then((resp) => {
          if (!resp) {
            this.newCourseDialog = false;
          } else if (resp.data.status == "success") {
			  console.log(resp.data)
            this.newCourseDialog = false;
            this.queryCourse();
          }
        })
        .finally(() => {
          this.d_start_time = "";
          this.d_end_time = "";
          this.d_course_name = "";
        });
    },

    // 删除效果
    deleteClassCourse() {
      if (this.status.isCheckBoxDisplay) {
        this.status.isCheckBoxDisplay = false;
      } else {
        this.status.isCheckBoxDisplay = true;
      }
    },
    /*
     * 全选
     * */
    handleCheckAllChange(val) {
      this.checkedClassCourseId = val ? this.allClassCourseIds : [];
      this.isIndeterminate = false;
    },
    /*
        单选
       */
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.allClassCourseIds.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.allClassCourseIds.length;
    },
    /*
        批量删除 班课
       */
    batchDeleteClassCourse() {
      var that = this;
      var ids = "";
      var isSelectClassCourse = false;
      for (var i in this.checkedClassCourseId) {
        ids += this.checkedClassCourseId[i] + ",";
        isSelectClassCourse = true;
      }
      if (!isSelectClassCourse) {
        this.$message({
          message: "您没有选择任何班课",
          type: "warning",
        });
        return;
      }
      ids = ids.substr(0, ids.length - 1);

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that
            .postRequest("/course/delete/" + ids)
            .then((resp) => {
              if (resp && resp.status == 200) {
                var data = resp.data;
                that.$message({ type: data.status, message: data.msg });
                that.queryCourse();
              }
            })
            .catch(() => {
              that.$message({
                type: "danger",
                message: "删除失败!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, // 查看课程详情
    goCourseDetail: function (course_id) {
      this.$router.push({
        path: "/famous_workspace",
        query: {
          course_id: course_id,
        },
      });
    },
  },
  mounted() {
    this.queryCourse();
    this.loadGrades();
    this.getFenlei();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

